import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:route_manager/wx_navigator.dart';
import 'package:vibration/vibration.dart';
import 'package:wallet_home/model/wallet_list_model.dart';
import 'package:wallet_home/page/theme/colors.dart';
import 'package:wallet_home/tools/theme_utils.dart';
import 'package:wallet_home/widget/reorderable_new_list.dart';

class WalletListWidget extends StatefulWidget {
  final List<CoinsBean> list;

  WalletListWidget({this.list});

  @override
  _WalletListWidgetState createState() => _WalletListWidgetState();
}

class _WalletListWidgetState extends State<WalletListWidget> {
  @override
  void initState() {
    super.initState();
  }

  _buildListItem(BuildContext context, CoinsBean bean) {
    return GestureDetector(
      child: Container(
        decoration: BoxDecoration(
            color: ThemeUtils.getThemeColor(
                context: context,
                brightnessColor: Colors.white,
                darkColor: Colours.dark_bg_color),
            border: Border(bottom: BorderSide(color: Colors.grey[200]))),
        height: 60,
//        color: ThemeUtils.getThemeColor(
//            context: context,
//            brightnessColor: Colors.white,
//            darkColor: Colours.dark_bg_color),
        width: double.infinity,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 15),
              child: Image.asset(
                bean.img,
                width: 30,
                height: 30,
                fit: BoxFit.cover,
                package: 'wallet_home',
              ),
            ),
            Padding(
                padding: EdgeInsets.only(left: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      bean.title,
                      style: TextStyle(fontSize: 16),
                    ),
                    Text(
                      "≈${bean.cnyBalance} CNY",
                      style: TextStyle(fontSize: 12),
                    )
                  ],
                )),
            Spacer(),
            Padding(
                padding: EdgeInsets.only(right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      NumUtil.getNumByValueStr(bean.num, fractionDigits: 8)
                          .toStringAsFixed(6),
                      style: TextStyle(fontSize: 16),
                    ),
                    Text(
                      "${NumUtil.getNumByValueStr(bean.cnyMoney, fractionDigits: 8).toStringAsFixed(2)} CNY",
                      style: TextStyle(fontSize: 12),
                    )
                  ],
                )),
          ],
        ),
      ),
      onTap: () {
//        Map<String, Object> map = {
//          "coin_name": bean.title,
//          "coin_available": bean.num,
//          "coin_cny": bean.cnyBalance,
//          "coin_total": bean.num
//        };

        WXNavigator.pushNamed(
            context: context, routeName: "/coin_detail", arguments: bean);
      },
//      onLongPress: (){
//        Vibration.vibrate(duration: 200);
//        setState(() {
//
//        });
//      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(top: 80),
        child: ReorderableNewListView(
          children: [
            for (var i = 0; i < widget.list.length; i++)
              AnimationConfiguration.staggeredList(
                  key: ValueKey(widget.list[i]),
                  position: i,
                  duration: Duration(milliseconds: 300),
                  child: SlideAnimation(
                      verticalOffset: 250.0,
                      child: FadeInAnimation(
                        duration: Duration(milliseconds: 300),
                        child: _buildListItem(context, widget.list[i]),
                      )))
          ],
          onReorder: (oldIndex, newIndex) {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            var child = widget.list.removeAt(oldIndex);
            widget.list.insert(newIndex, child);
            setState(() {});
          },
          dragStartCallback: () {
            Vibration.vibrate(duration: 200);
          },
        )
//      ListView.separated(
//        // controller: _scrollController,
//        itemCount: widget.list.length ?? 0,
//        itemBuilder: (context, index) {
//          return AnimationConfiguration.staggeredList(
//              position: index,
//              duration: Duration(milliseconds: 300),
//              child: SlideAnimation(
//                  verticalOffset: 250.0,
//                  child: FadeInAnimation(
//                    duration: Duration(milliseconds: 300),
//                    child: _buildListItem(context, widget.list[index]),
//                  )));
//        },
//        separatorBuilder: (context, index) => Divider(
//          height: 1,
//          // color: Colors.grey[200],
//        ),
//      ),
        );
  }
}
